<!--
 * @Autor: Kadia
 * @Date: 2021-07-01 07:55:57
 * @LastEditors: Kadia
 * @Connect: nefukadia@foxmail.com
 * @LastEditTime: 2021-07-01 10:03:49
-->
<template>
    <div>
        <div class="min-div">
            <img class="image" src="../../assets/background.jpg" />
            <div id="login">
                <el-input class="input" v-model="email" type="text" placeholder="请输入商家邮箱"></el-input>
                <el-input class="input" v-model="password" type="password" show-password placeholder="请输入商家密码"></el-input>
                <div style="display:flex;align-items: center;justify-content: space-around;">
                    <el-button type="primary"  @click="onRegister" >注册商家</el-button>
                    <el-button type="success" @click="onLogin" v-loading="login">商家登录</el-button>
                </div>
            </div>
        </div>
        <my-footer></my-footer>
    </div>
</template>
<script>
export default {
    data(){
        return {
            email:'',
            password:'',
            login:false
        }
    },
    methods: {
        //点击登录
        onLogin(){
            const that=this;
            that.login=true;
            that.$axios({
                url:that.myConfig.manageApiUrl+'/login.php',
                method:'post',
                data:{
                    email:that.email,
                    password:that.password
                }
            }).then(function(res){
                that.login=false;
                console.log(res);
                if(res.data.errCode==200){
                    that.myConfig.shopId=res.data.shopId;
                    that.$message.success('登录成功');
                    that.$cookies.set('email',that.email);
                    that.$cookies.set('password',that.password);
                    setTimeout(function(){
                        that.$router.push({
                            name:'Index',
                        });
                    }, 1500);
                }else{
                    that.$message.error('登录失败！账号或密码错误');
                }
            }).catch(function(err){
                console.log(err);
                that.$message.warning('系统繁忙，请稍后再试');
            });
        },
        //点击注册
        onRegister(){
            const that=this;
            that.$router.push({
                name:'Register'
            });
        }
    }
}
</script>
<style scoped>
    @keyframes up{
        from{
            top: 100%;
        }to{
            top: 50%;
        }
    }
    .image{
        width: 100%;
        position: absolute;
        top: 0;
        z-index: -1;
    }
    #login{
        width: 400px;
        height: 260px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -200px;
        margin-top: -180px;
        padding-top: 50px;
        padding-bottom: 50px;
        border-radius: 30px;
        background-color:slategray;
        opacity: 0.8;
        animation: up 2s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    .input{
        width: 80%;
        border-radius: 15px;
    }
</style>